<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
  anonymous: true
}
</route>

<script lang="ts" setup>
import { useToast } from 'wot-design-uni'
import SmsCaptchaLogin from './components/SmsCaptchaLogin.vue'
import UserContract from './components/UserContract.vue'
import { useUserStore } from '@/stores'

const toast = useToast()
const loading = ref(false)
const loginMode = ref<'fast' | 'verify-code'>('fast')
const userStore = useUserStore()

// 隐私协议
const agreementChecked = ref(false)
const animation = ref('')
const showAgreeAnimation = () => {
  console.log('showAgreeAnimation')
  animation.value = 'animation-shake'
  setTimeout(() => {
    animation.value = ''
  }, 1000)
}

const onOpenPrivacyContract = () => {
  // #ifdef MP-WEIXIN
  wx.openPrivacyContract({
    success: () => {
      console.log('打开成功')
    },
    fail: () => {
      uni.showToast({
        title: '打开失败，稍后重试',
        icon: 'none',
      })
    },
  })
  // #endif
}

// 用户协议
const userContractPopupRef = ref()
const userContractShow = ref(false)
const onOpenUserContract = () => {
  // userContractPopupRef.value?.open()
  userContractShow.value = true
}

// 快速登录
const onWxPhoneLogin = async (e) => {
  console.log('----', e	)
  loading.value = true
  try {
    if (e.detail.code) {
      const code = e.detail.code
      await userStore.loginByWxPhone(code)
      await userStore.refreshUserInfo()
      uni.switchTab({ url: '/pages/index/index' })
    } else if (e.detail.errno === 1400001) {
      uni.showToast({
        icon: 'none',
        title: '获取手机号次数已达当前小程序上限',
      })
    } else if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
      uni.showToast({
        icon: 'none',
        title: '您已拒绝登录',
      })
    } else {
      toast.error('操作失败')
    }
  } finally {
    loading.value = false
  }
}

onLoad(() => {

})
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/login-bg.png" :draggable="false" />
  <view class="page relative flex-col-start-center px-4 pb-safe">
    <view class="mt-30% flex-col-start-center">
      <image class="mb-10rpx size-180rpx" src="/static/logo.png" />
      <text class="text-xl text-primary font-500">
        秉学
      </text>
    </view>
    <view class="mt-20% w-620rpx">
      <template v-if="loginMode === 'fast'">
        <view class="flex-row-start-center text-13px leading-20px" :class="[`agree-box ${animation}`]">
          <label><radio style="transform:scale(0.8)" color="#33AD7C" :checked="agreementChecked" @click="() => agreementChecked = !agreementChecked" /></label>
          <text class="text-gray-8">
            我已阅读并同意
          </text>
          <text class="text-primary" @click="onOpenPrivacyContract">
            《隐私政策》
          </text>
          <text class="text-gray-8">
            、
          </text>
          <text class="text-primary" @click="onOpenUserContract">
            《用户协议》
          </text>
        </view>
        <button v-if="!agreementChecked" class="btn-main mt text-white" :loading="loading" type="primary" @click="showAgreeAnimation">
          手机号快捷登录
        </button>
        <button v-else class="btn-main mt text-white" :loading="loading" type="primary" open-type="getPhoneNumber" @getphonenumber="onWxPhoneLogin">
          手机号快捷登录
        </button>
        <view class="mt text-center">
          <text class="text-14px text-primary" @click="loginMode = 'verify-code'">
            登录遇到问题？尝试手机验证码登录 >>
          </text>
        </view>
        <!-- <button class="btn-secondary mt text-16px" plain @click="loginMode = 'verify-code'">
        手机验证码登录
        </button> -->
      </template>
      <SmsCaptchaLogin v-else @back="loginMode = 'fast'" />
    </view>
  </view>
  <wd-popup
    v-model="userContractShow"
    position="bottom"
    closable
  >
    <view class="h-600rpx bg-white">
      <scroll-view class="scroll-view-box" scroll-y="true">
        <UserContract />
      </scroll-view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.background {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.btn-main {
  background: $uni-color-primary;
}

.btn-secondary {
  color: $uni-color-primary;
  border: 1px solid $uni-color-primary;
}

// 处理抽屉内容滚动
.scroll-view-box {
	flex: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.animation-shake {
  animation: shake 0.3s !important;
}

@keyframes shake {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(0)
  }

  10% {
    transform: translateX(-9px)
  }

  20% {
    transform: translateX(8px)
  }

  30% {
    transform: translateX(-7px)
  }

  40% {
    transform: translateX(6px)
  }

  50% {
    transform: translateX(-5px)
  }

  60% {
    transform: translateX(4px)
  }

  70% {
    transform: translateX(-3px)
  }

  80% {
    transform: translateX(2px)
  }

  90% {
    transform: translateX(-1px)
  }
}
</style>
